<style lang="less" scoped>
  .UCenter-bg {
    background-size: cover;
    height: 550rpx;
    display: flex;
    justify-content: center;
    padding-top: 40rpx;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-weight: 300;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    width: 100%;
    z-index: 11;
    position: relative;
    .png {
      border-radius: 50%;
      width: 160rpx;
      height: 160rpx;
    }
    .text-xl {
      margin-top: 20rpx;
    }
  }
  .fixed {
    position: fixed;
    top: 0;
  }
  .screen-swiper {
    height: 550rpx;
  }
  .setting {
    .cuIcon-pic {
      position: absolute;
      top: 160rpx;
      right: 44rpx;
      color: #ffffff;
      font-size: 40rpx;
    }
  }
  .UCenter-bg text {
    opacity: 0.8;
  }
  .UCenter-bg image {
    width: 200rpx;
    height: 200rpx;
  }
  .UCenter-bg .gif-wave{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 99;
    mix-blend-mode: screen;
    height: 100rpx;
  }
  .text-xl {
    text-align: center;
  }
  .top {
    position: relative;
    z-index: 10;
  }
  .text-xl {
    font-size: 28rpx;
  }
  .makes {
    text-align: center;
    margin: 0 auto;
    margin-top: 20rpx;
  }
  .cu-tag.badge {
    right: 90rpx;
  }
</style>
<template>
  <div class="top">
    <swiper class="screen-swiper animated fadeIn" indicator-dots="true" circular="true"
            autoplay="true" interval="5000"
            duration="500" :class="{'top': banner}" v-if="banner">
      <swiper-item v-for="(item,index) in imgs" :key="index">
        <image :src="host + item" mode="aspectFill"/>
      </swiper-item>
    </swiper>
    <view class="UCenter-bg animated fadeIn" :style="{'background-image': 'url('+bgtImg+')'}" :class="{'fixed':banner}">
      <view class="setting" v-if="isAuth">
        <text class="cuIcon-pic lg text-gray" @tap="uploadBgt"/>
      </view>
      <view class="padding">
        <view class="cu-avatar-group" @tap="goHome">
          <view class="cu-avatar round xl" :style="{'background-image':'url('+userInfo.user_avatar+')'}">
            <view class="cu-tag badge" :class="[userInfo.user_sex===0 ? 'cuIcon-female bg-pink' : 'cuIcon-male bg-blue']"/>
            <text class="addv cuIcon-vip lg text-gray" @tap.stop="goVade()" v-if="authen" />
          </view>
        </view>
        <view class="text-xl">{{userInfo.user_nickname}}</view>
        <view class="makes">
          <text class="cu-tag round bg-blue light sm" @tap.stop="appoint" v-if="authen">预约拍摄</text>
        </view>
      </view>
      <view class="margin-top-sm">
        <text>{{info.user_sign || '这家伙好懒啊,什么都没有留下'}}</text>
      </view>
      <image src="http://img.he29.com/api/gif/cbde6f5e83388a096d28fab7339d56fd.gif"
             mode="scaleToFill" class="gif-wave"/>
    </view>
  </div>
</template>
<script type="text/javascript">
  /**
   * Created by PhpStorm.
   * User:  iyahe@qq.com (天明)
   * Date: 2020/1/4
   * Time: 20:37
   * Description:
   */
  export default {
    props:{
      userInfo: {
        type: Object,
        default: {}
      },
      isAuth: {
        type: Boolean,
        default: false
      },
      option: {
        type: Object,
        default: {}
      },
      uid: {
        type: Number,
        default: 0
      },
    },
    data() {
      return {
        info: {},
        host: '',
        imgs: [],
        banner: false,
        total: false,
        bgtImg: '',
        authen: false,
        id: ''
      }
    },
    watch: {
      option (val) {}
    },
    methods: {
      goHome (){
        this.$emit('home', 1)
      },
      uploadBgt () {
        this.$tips.confirmd(`您即将进入背景图更换界面~`, ()=> {
          this.$tools.choseFile(false,1).then(list => {
            const img =  list[0].path;
            this.$cache.set('cutter_img',img);
            this.$tools.href('server/cutter?name=cutter_img&back=' + this.$tools.base64('user/index?tab=4'));
          })
        });
      },
      getBgt () {
        this.id = this.option.id ? this.option.id : this.$cache.get('user_uid');
        this.$ajax.requrst('user/getBgt', {
          id: this.id
        }).then(res=> {
          if (res.code > 0 ) {
            this.info = res.info;
            this.authen = parseInt(this.info.authen) === 2;
            if (res.info.imgs) {
              this.imgs = res.info.imgs;
              if (this.imgs.length > 1) {
                this.banner = true;
              } else {
                this.bgtImg = this.host + this.imgs[0];
                this.banner = false;
              }
            } else {
              this.bgtImg = 'http://img.he29.com/api/jpg/8f55354eafd88bb15b5a3873d859bd68.jpg'
            }
          } else {
            this.bgtImg = 'http://img.he29.com/api/jpg/8f55354eafd88bb15b5a3873d859bd68.jpg'
          }
        })
      },
      appoint () {
        this.$tools.href('square/point?id=' + this.id)
      },
      goVade(){
        this.$tools.href('user/authen?id='  + this.id)
      }
    },
    created () {
      this.host = this.$gloub.host;
    },
    mounted () {
      this.getBgt();
    }
  }
</script>
